<template>
  <div class="echart" ref="echartMap"></div>
</template>

<script>
import JSON from '/static/map/json/world.json';
import {mapGetters} from 'vuex'

let lists = []
export default {
  props: {},
  computed: {
    ...mapGetters(['wsAppData'])
  },
  watch: {
    wsAppData(val) {
      console.log(val.data)
      if (!lists.length) {
        lists.push({
          latitude: 116.50,
          longitude: 31.75
        })
      }
    }
  },
  mounted() {
    this.$echarts.registerMap('world', JSON, {});
    const lineCharts = this.$echarts.init(this.$refs.echartMap);
    let options = {
      tooltip: {
        trigger: 'item',
        renderMode: 'html',
        // 触发方式
        triggerOn: 'mousemove', // 'mousemove|click'
        enterable: true,
        backgroundColor: '#fff',
        padding: 0,
        textStyle: {
          color: '#000',
          fontSize: '12'
        },
        extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
      },
      dispatchAction: {
        type: 'downplay'
      },
      roam: false,
      roamController: {
        show: true,
        x: 'right',
        mapTypeControl: {
          china: true
        }
      },
      geo: {
        show: true,
        map: 'world',
        type: 'map',
        mapType: 'world',
        roam: true,
        boundingCoords: [
          // 定位左上角经纬度
          [-180, 90],
          // 定位右下角经纬度
          [180, -90]
        ],
        label: {
          normal: {
            // 显示省份标签
            show: false,
            textStyle: {
              color: '#fff',
              fontSize: 10
            }
          },
          emphasis: {
            // 对应的鼠标悬浮效果
            show: false,
            // 选中后的字体样式
            textStyle: {
              color: '#000',
              fontSize: 14
            }
          }
        },
        itemStyle: {
          color: '#fff',
          normal: {
            areaColor: 'rgba(0,0,0,0)',
            borderColor: '#8abcd1',
            borderWidth: 1
          },
          emphasis: {
            borderWidth: 0.5,
            borderColor: '#8abcd1',
            areaColor: 'rgba(0,0,0,0.2)'
          }
        },
        emphasis: {
          label: {
            show: false
          }
        }
      },
      series: [
        {
          name: '',
          type: 'scatter',
          coordinateSystem: 'geo',
          color: ['#000'],
          tooltip: {
            position: "right",
            color: "#000",
            formatter(d) {
              console.log(d)
              return `<div style="padding: 5px 10px;">【${d.data.name}】</div>`;
            },
          },
          data: [
            {
              name: '六安',
              value: [116.50, 31.75]
            },
            {
              name: '马鞍山',
              value: [118.51, 31.68]
            },
            {
              name: '宿州',
              value: [116.98, 33.63]
            },
            {
              name: 'aaa',
              value: [179.312585, 66.904105]
            },
            {
              name: 'aaa',
              value: [-154.835702, 68.076609]
            }
          ],
        },
        {
          name: "",
          type: "lines",
          zlevel: 6,
          lineStyle: {
            type: 'solid',
            width: 1,
            opacity: 1,
            curveness: 0,
            orient: 'horizontal',
            color: "#000",
          },
          show: true,
          data: [
            {
              point: ['六安', '马鞍山'],
              coords: [
                [116.50, 31.75],
                [118.51, 31.68]
              ],
            },
            {
              point: ['宿州', '马鞍山'],
              coords: [
                [116.98, 33.63],
                [118.51, 31.68]
              ],
            },
            {
              point: ['宿州', '六安'],
              coords: [
                [116.98, 33.63],
                [116.50, 31.75]
              ],
            },
            {
              point: ['宿州', '六安'],
              coords: [
                [116.50, 31.75],
                [179.312585, 66.904105]
              ],
            },
            {
              point: ['宿州', '六安'],
              coords: [
                [179.312585, 66.904105],
                [180, 68.076609]
              ],
            },
            {
              point: ['宿州', '六安'],
              coords: [
                [-180, 68.076609],
                [-154.835702, 68.076609]
              ],
            }
          ],
          tooltip: {
            position: "right",
            color: "#000",
            formatter(d) {
              console.log(d)
              return `<div style="padding: 5px 10px;"> 【${d.data.point[0]}】< ---- >【${d.data.point[1]}】</div>`;
            },
          },
        },
      ],
    };

    lineCharts.setOption(options);
    window.addEventListener("resize", function () {
      lineCharts.resize();
    });
  },
  methods: {},
};
</script>

<style lang="less" scoped>
  .echart {
    width: 100%;
    height: 100%;
  }
</style>